// 存放 vuex[状态管理] 相关核心代码

// modules - 分模块管理

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import setting from './modules/setting'

// 插件安装
Vue.use(Vuex)

// 创建仓库
const store = new Vuex.Store({
    /* 核心一 */
    state: {
        title: '仓库大标题',
        count: 100,
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    },
    /* 核心二 */
    // mutations 可以提供修改数据的方法
    mutations: {
        // 所有的 mutation 函数，第一个参数都是 state
        addCount(state, obj) {
            state.count += obj.count
        },
        subCount(state, n) {
            state.count -= n
        },
        changeTitle(state, newTitle) {
            state.title = newTitle
        },
        changeCount(state, newCount) {
            state.count = newCount
        }
    },
    /* 核心三 */
    // actions 处理异步
    // 不能直接操作 state，还是需要调用同步方法 mutations 修改 state
    actions: {
        // actions 函数的第一个参数是 context ，在未分模块的情况下 context 可以看作 store
        // 所以可以通过 context.commit('mutation 函数名',参数)修改 state
        changeCountAction(context, num) {
            // 这里是模拟异步，一般是用来发送异步请求
            setTimeout(() => {
                context.commit('changeCount', num)
            }, 1000)
        }
    },
    /* 核心四 */
    // getters 用来获取 state 派生出来的状态
    getters: {
        // getters 中的函数，第一个参数就是 state，并且必须有返回值，返回值就是 getters 的值
        filterList(state) {
            return state.list.filter(item => item > 5)
        }
    },
    /* 核心五 */
    // modules 用来管理不同模块
    modules: {
        user,
        setting
    }
})

// 导出给 main.js 使用
export default store
